<template>
  <div class="comment" :style="{ marginLeft: depth * 20 + 'px' }">
    <div class="comment-header">
      <a-avatar :src="comment.avatar" size="small" />
      <span class="comment-user">{{ comment.user }}</span>
      <span class="comment-time">{{ formatTime(comment.time) }}</span>
      <div class="comment-actions-right" v-if="hasReplies">
        <a-button type="link" size="small" @click="toggleCollapse" class="collapse-btn">
          <template #icon>
            <DownOutlined v-if="!collapsed" />
            <UpOutlined v-else />
          </template>
          <span v-if="comment.replies.length > 0">({{ comment.replies.length }})</span>
        </a-button>
      </div>
    </div>
    <div class="comment-content">{{ comment.content }}</div>
    <div class="comment-actions">
      <a-button type="link" size="small" @click="handleReply">回复</a-button>
    </div>

    <!-- 递归渲染子评论 -->
    <div class="comment-replies" v-if="hasReplies && !collapsed">
      <comment
        v-for="reply in comment.replies"
        :key="reply.id"
        :comment="reply"
        :depth="depth + 1"
        @reply="handleChildReply"
      />
    </div>
  </div>
</template>

<script>
import { defineComponent, computed, ref } from "vue";
import dayjs from "dayjs";
import { DownOutlined, UpOutlined } from "@ant-design/icons-vue";

export default defineComponent({
  name: "Comment",
  components: {
    DownOutlined,
    UpOutlined,
  },
  props: {
    comment: {
      type: Object,
      required: true,
    },
    depth: {
      type: Number,
      default: 0,
    },
  },
  emits: ["reply"],
  setup(props, { emit }) {
    const collapsed = ref(props.depth > 0); // 默认子评论收起

    const hasReplies = computed(() => {
      return props.comment.replies && props.comment.replies.length > 0;
    });

    const formatTime = (time) => {
      return dayjs(time).format("YYYY-MM-DD HH:mm");
    };

    const handleReply = () => {
      emit("reply", props.comment);
    };

    const handleChildReply = (comment) => {
      emit("reply", comment);
    };

    const toggleCollapse = () => {
      collapsed.value = !collapsed.value;
    };

    return {
      formatTime,
      handleReply,
      handleChildReply,
      toggleCollapse,
      collapsed,
      hasReplies,
    };
  },
});
</script>

<style scoped>
.comment {
  padding: 12px 0;
  border-bottom: 1px solid #f0f0f0;
  transition: all 0.3s;
}

.comment:last-child {
  border-bottom: none;
}

.comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
  position: relative;
}

.comment-user {
  margin: 0 8px;
  font-weight: bold;
}

.comment-time {
  color: #999;
  font-size: 12px;
  margin-right: 8px;
}

.comment-content {
  margin-bottom: 8px;
  padding-left: 32px; /* 头像宽度 + 边距 */
}

.comment-actions {
  margin-bottom: 8px;
  padding-left: 32px;
}

.comment-actions-right {
  margin-left: auto;
  display: flex;
  align-items: center;
}

.collapse-btn {
  color: #666;
  font-size: 12px;
}

.collapse-btn:hover {
  color: #1890ff;
}

.comment-replies {
  border-left: 2px solid #e8e8e8;
  margin-left: 16px;
  padding-left: 8px;
  transition: all 0.3s;
}
</style>
